<template>
  <div class="bg-background fixed z-[2000] size-full">
    <transition name="slide-left">
      <div v-show="!showUnlockForm" class="size-full">
        <div
          class="flex-col-center text-foreground/80 hover:text-foreground group my-4 cursor-pointer text-xl font-semibold"
          @click="toggleUnlockForm"
        >
          <Icon
            icon="lucide:lock-keyhole"
            class="size-5 transition-all duration-300 group-hover:scale-125"
          />
          <span>点击解锁</span>
        </div>
        <div class="flex h-full justify-center px-[10%]">
          <div
            class="bg-accent flex-center relative mb-14 mr-20 h-4/5 w-2/5 flex-auto rounded-3xl text-center text-[260px]"
          >
            <span class="absolute left-4 top-4 text-xl font-semibold">
              {{ meridiem }}
            </span>
            {{ hour }}
          </div>
          <div
            class="bg-accent flex-center mb-14 h-4/5 w-2/5 flex-auto rounded-3xl text-center text-[260px]"
          >
            {{ minute }}
          </div>
        </div>
      </div>
    </transition>

    <transition name="slide-right">
      <div
        v-if="showUnlockForm"
        class="flex-center size-full"
        @keydown.enter.prevent="handleSubmit"
      >
        <div class="flex-col-center mb-10 w-[300px]">
          <NiceAvatar :src="avatar" class="enter-x mb-6 size-20" />

          <div class="enter-x mb-2 w-full items-center">
            <Form />
          </div>
          <NiceButton class="enter-x w-full" @click="handleSubmit">进入系统</NiceButton>
          <NiceButton class="enter-x my-2 w-full" variant="ghost" @click="$emit('to-login')">
            返回登录
          </NiceButton>
          <NiceButton class="enter-x mr-2 w-full" variant="ghost" @click="toggleUnlockForm">
            返回
          </NiceButton>
        </div>
      </div>
    </transition>

    <div class="enter-y absolute bottom-5 w-full text-center xl:text-xl 2xl:text-3xl">
      <div v-if="showUnlockForm" class="enter-x mb-2 text-3xl">
        {{ hour }}:{{ minute }}
        <span class="text-lg">{{ meridiem }}</span>
      </div>
      <div class="text-3xl">{{ date }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useAccessStore } from '#/stores/modules'
  import { Icon } from '@iconify/vue'
  import { useScrollLock } from '@nice/hooks'
  import { NiceAvatar, NiceButton } from '@nice/nice-ui'
  import { useVbenForm, z } from '@vben-core/form-ui'
  import { storeToRefs } from '@vben/stores'
  import { useDateFormat, useNow } from '@vueuse/core'

  interface Props {
    avatar?: string
  }

  defineOptions({
    name: 'LayoutLockScreen',
  })

  withDefaults(defineProps<Props>(), {
    avatar: '',
  })

  defineEmits<{ 'to-login': [] }>()

  const accessStore = useAccessStore()

  const now = useNow()
  const meridiem = useDateFormat(now, 'A')
  const hour = useDateFormat(now, 'HH')
  const minute = useDateFormat(now, 'mm')
  const date = useDateFormat(now, 'YYYY-MM-DD dddd', { locales: 'zh-CN' })

  const showUnlockForm = ref(false)
  const { lockScreenPassword } = storeToRefs(accessStore)

  const [Form, { form, validate }] = useVbenForm(
    reactive({
      commonConfig: {
        hideLabel: true,
        hideRequiredMark: true,
      },
      schema: computed(() => [
        {
          component: 'VbenInputPassword' as const,
          componentProps: {
            placeholder: '请输入锁屏密码',
          },
          fieldName: 'password',
          label: '密码',
          rules: z.string().min(1, { message: '请输入密码' }),
        },
      ]),
      showDefaultActions: false,
    })
  )

  const validPass = computed(() => lockScreenPassword?.value === form?.values?.password)

  async function handleSubmit() {
    const { valid } = await validate()
    if (valid) {
      if (validPass.value) {
        accessStore.unlockScreen()
      } else {
        form.setFieldError('password', '密码错误')
      }
    }
  }

  function toggleUnlockForm() {
    showUnlockForm.value = !showUnlockForm.value
  }

  useScrollLock()
</script>
